<div id="DemandDetail" data-title="项目详情">
    <style>@@include('modules/DemandDetail/main.css.min')</style>
    <div class="top-tip-yel" evt="goFollowWx">
        <p>重要！3日内关注“万屏汇”公众号<br>即送<b class="text-danger">5次</b>抢单机会</p>
        <button class="btn pull-right">立即关注</button>
    </div>
    <div class="DemandInfo_vue">
        <div class="details">
            <span class="icon-return" evt="goIndex"> 项目大厅</span>
            <!--***项目详细信息-->
            <div class="container">
                <h1 v-if="current_demand.status==10 || current_demand.status==20 || current_demand.status==30">等待报价</h1>
                <h1 v-else>抢单结束</h1>
                <div class="demand-info">
                    <div class="demand-info-budget">
                        <span class="demand-info-title">预算<span v-if="current_demand.for_gold"> .</span></span>
                        <span class="format-budget color-black" v-if="current_demand.cate == '4'"><b>竞价</b></span>
                        <span class="format-budget color-black" v-else-if="current_demand.budgetFormat.budget">{{current_demand.budgetFormat.budget}}{{current_demand.budgetFormat.unit}}</span>
                        <span class="format-budget color-black" v-else>议价</span>
                    </div>

                    <div class="demand-info-address">
                        <span class="demand-info-title">位置</span>
                        <span v-if="current_demand.cate == 4" class="color-gray">{{current_demand.city}}</span>
                        <span v-else class="color-gray">{{current_demand.city}}{{current_demand.address}}</span>
                    </div>

                    <div class="demand-info-address" v-if="current_demand.cate=='2'">
                        <span class="demand-info-title">故障</span>
                        <span class="demand-cate demand-repair">维修</span>
                        <span class="color-gray detail-info">{{current_demand.malf_name}}</span>
                    </div>

                    <div class="demand-info-address" v-else>
                        <span class="demand-info-title">需求</span>
                        <span class="demand-cate" v-if="current_demand.cate == '1'">安装</span>
                        <span class="demand-cate demand-rental" v-else-if="current_demand.cate == '3'">租赁</span>
                        <span class="color-gray detail-info">{{current_demand.location_name}},{{current_demand.size}}㎡,{{current_demand.color_name}},{{current_demand.span}}</span>
                    </div>

                    <div class="demand-info-address">
                        <span class="demand-info-title">称呼</span>
                        <span class="color-gray">{{current_demand.user.nick}}</span>
                    </div>

                    <div class="demand-info-address">
                        <span class="demand-info-title">手机</span>
                        <span class="color-gray" v-if="current_demand.supplier_partic_status==200 && current_demand.tag==0 && current_demand.my_follow_type != 3">{{current_demand.user.phone}}</span>
                        <span class="color-gray" v-else>抢单成功可见</span>
                    </div>
                    <!--录音-->
                    <div class="demand-info-audioPane" dom="audioPane" v-if="current_demand.audio != '' || current_demand.audio_sensitive ">
                        <span class="demand-info-title">客户录音</span>
                        <audio dom="audio" id="audioTag" preload="metadata" v-bind:src="current_demand.audio"></audio>

                        <div class="color-gray controls" evt="playPause">
                            <!--背景圆-->
                            <div class="circle">
                                <!--左半边圆-->
                                <div class="circle_left">
                                    <div class="clip_left">

                                    </div>
                                </div>
                                <!--右半边圆-->
                                <div class="circle_right">
                                    <div class="clip_right"></div>
                                </div>
                                <button class="a-play play-pause" dom="play">
                                    <span class="icon-play-one"></span>
                                </button>
                            </div>
                        </div>


                    </div>
                    <!--浏览人数-->
                    <div class="demand-info-scan">
                        <span class="scan-count">{{current_demand.scan_count}}人浏览过</span>
                        <span class="deadline pull-right" v-if="current_demand.tag == 0 && current_demand.my_follow_type == 0 && (current_demand.status == 8 || current_demand.status == 10 || current_demand.supplier_partic_status == 110 || current_demand.supplier_partic_status == 120)">
                                <span class="icon-Tender text-primary"></span>
                        <span class="count-deadline"></span>
                        </span>
                    </div>

                </div>
            </div>
            <!--项目未结项显示信息:1、评论列表；2、备注和图片；3、维修项目显示颜色间距环境；如果以上三项都不存在，则不显示-->
            <div class="notes">
                <div class="gray-bar " v-bind:class="{'hide':!current_demand.source && current_demand.cmt_list.length==0 && !current_demand.note && !current_demand.image && current_demand.cate!='2'}"></div>
                <div class="container">
                    <h3 v-bind:class="{'hide':!current_demand.source && current_demand.cmt_list.length==0 && !current_demand.note && !current_demand.image && current_demand.cate!='2'}">
                        信息更新</h3>
                    <!--评论列表-->
                    <div class="notes-info " v-for="cmt_list of publish_remark_list ">

                        <div class="user-info ">
                            <span class="name ">万屏汇小秘书</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">【{{cmt_list.inedx}}次发布】{{cmt_list.val}}</div>
                    </div>
                    <!--项目固定显示信息-->
                    <!--所有的项目有备注则显示-->
                    <div class="notes-info " v-if="current_demand.note ">
                        <!--<span class="family-name ">{{current_demand.user.nick.substr(0,1)}}</span>-->
                        <div class="user-info ">
                            <span class="name ">万屏汇小秘书</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">{{current_demand.note}}</div>
                    </div>
                    <!--所有的项目有图片则显示-->
                    <div class="notes-info " v-if="current_demand.image !='' ">
                        <!--<span class="family-name ">{{current_demand.user.nick.substr(0,1)}}</span>-->
                        <div class="user-info ">
                            <span class="name ">客户 | {{current_demand.user.nick}}</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">
                            <div class="c-drawing " v-bind:class="{ 'hasImg' : current_demand.image !='' } ">
                                <p class="c-d-tip " v-if="current_demand.image=='' ">工程场地实拍图尚未上传</p>
                                <div class="c-d-tu " v-else>
                                    <img v-bind:src="current_demand.image " class=" " evt="scanBig" dom="drawPic " />
                                </div>
                            </div>
                            <div class="c-d-site ">
                                <span class="icon-nail "></span>
                                <span v-if="current_demand.cate!='2' ">工程场地实拍图</span>
                                <span v-else>屏幕故障实拍图</span>
                            </div>
                        </div>
                    </div>
                    <!--维修的项目需要将项目本身信息（间距，颜色等）显示出来，而安装只需要显示图片和备注-->
                    <div class="notes-info " v-if="current_demand.cate=='2'">
                        <!--<span class="family-name ">{{current_demand.user.nick.substr(0,1)}}</span>-->
                        <div class="user-info ">
                            <span class="name ">客户 | {{current_demand.user.nick}}</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note " v-if="current_demand.cate=='2' ">
                            {{current_demand.location_name}}，{{current_demand.color_name}}，间距{{current_demand.span}}
                            <span v-if="current_demand.size != 0.00">，面积{{current_demand.size}}㎡</span>
                        </div>
                    </div>
                    <!--客户来源-->
                    <div class="notes-info " v-if="current_demand.source && current_demand.cate !='4'">
                        <div class="user-info ">
                            <span class="name ">万屏汇小秘书</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">
                            <span>客户来源：{{current_demand.source}}</span><br>
                            <span v-if="sem(current_demand.sem)">搜索词：{{sem(current_demand.sem)}}</span>
                        </div>
                    </div>
                    <!--项目固定显示信息end-->
                </div>
            </div>
            <!--项目最新动态end-->

            <!--***参与竞价的工程商列表-->
            <div class="partical-suppliers">
                <div class="gray-bar"></div>
                <div class="container">
                    <h3>参与抢单记录<span class="small-words">(抢单成功即可获得客户联系方式)</span></h3>
                    <div class="list" v-if="current_demand.supplier_list.length != 0">
                        <div class="item" v-for="(supplier,index) in current_demand.supplier_list" v-bind:class="{'succ-item': supplier.succ_item == true}">
                            <span class="index"  v-bind:class="{'myself-index': index == 0 || current_demand.status == '10'}">{{index + 1}}</span>
                            <div class="infos">
                                <h5>{{supplier.nick}}</h5>
                                <p>
                                    {{supplier.mobile}}
                                </p>
                            </div>
                            <span class="offer pull-right" v-if="current_demand.status==10 || current_demand.status==20 || current_demand.status==30">正在抢单</span>
                            <span class="offer pull-right text-primary" v-else-if="index==0">抢单成功</span>
                            <span class="offer pull-right" v-else>参与抢单</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gray-bar"></div>
            <!--***折叠-->
            <div class="zhedie">
                <!--抢过单且项目结束-->
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    了解万屏汇<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇是洲明科技旗下派单平台，与百度达成独家战略合作，通过集采流量，SEM技术，站群技术垄断了线上客户流量，将客户高效的分配给工程商，降低工程商获客成本。了解更多请不拨打 400-998-0215
                                <br/>关注“万屏汇”微信公众号，可更快获得订单发送，优先抢得订单
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    如何优先抢单？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇订单以成就值从高到低依次推送订单消息，提高您的成就值可快速获得订单推送。
                                <br>每次项目推送将会消耗1条推送次数，请确保套餐中“新项目提醒”额度充足，以免错过最新的项目机会。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                    抢单规则？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseFour" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇订单以竞拍方式获得客户联系方式，每个订单竞拍时间为5分钟，竞拍期间内出价最高的前2名可获得客户联系方式，抢单结束后将退回出局者汇币。
                                <br>每个订单最多出200汇币，属于爆灯状态，多人爆灯，成就值较高者得。
                                <br>如竞拍成功者15分钟内未能联系客户，名额作废且扣除当次竞拍汇币的30%作为惩罚，并自动通知下一名竞拍者中标。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--***页面底部按钮及报价框-->
        <div class="demand-bottom">
            <!--抢单第一名 :如果有-->
            <div class="first-number" v-if="current_demand.status==10 || current_demand.status==20 || current_demand.status==30">抢单成功，即可获得客户联系方式</div>
            <div class="first-number yellow-link" v-else  evt="goFollowWx">关注“万屏汇”公众号可优先抢单，立即关注</div>
            <!--项目进行中RO；排队中-->
            <div class="button-status">
                <a class="btn" v-if="current_demand.status==10 || current_demand.status==20 || current_demand.status==30" evt="modalFollowWx">立即抢单</a>
                <a class="btn disabled" v-else>您来晚了</a>
            </div>
        </div>
    </div>
    <div class="sendImgPending hide ">
        <div class="loading "></div>
        <p class="text ">数据加载中</p>
    </div>
</div>